<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
*{margin: 0;padding: 0;}
input,button{outline: none;}
ul li{list-style: none;}
.fz10{font-size: 20px;}
.fz4{font-size: 14px;}
.fz6{font-size: 16px;}
.hide1{display: none;}
.dis_b{display: block;}
.bg{background-color: #ffffff;}
.b-btm{border-bottom: 1px solid #bababa;}
.fr{float: right;}
.fl{float: left;}
.dis_in{display: inline-block;}
.wrapper{position: relative;width: 100%;min-width:970px;height: 100vh;overflow: hidden;}
.wrp-bg{background-color: #F1F6FF;}
/*登录*/
.sign-box{position: fixed;top: 29%;left: 34%;width: 30%;}
.sign{background-color: #ffffff;border-radius: 10px; padding: 20px; width: 100%;height: 250px;border:1px solid #E2E2E2;}
.sign input{border: 1px solid #d1d1d1;width:60%;}
.sign input,.btn{border-radius: 20px;padding: 2px 10px; margin:30px auto; display: block;height: 35px;line-height: 35px;}
.btn{width: 65%;height: 40px; background-color: #6CAAF0;font-size:20px; color: #ffffff;border-style: none;}
.sign-top span{display: block;height: 32px;line-height:32px;text-align: center; }
.sign-top{margin-bottom: 15px;}
/*后台*/
/*top*/
.con-top{height: 55px;line-height: 55px;padding: 0 3%;}
.user{margin-right: 10px;}
.exit{border-style: none;background-color: #3B9EF6;color: #ffffff;font-size: 16px;width: 60px;height: 28px;border-radius: 15px;}
/*content*/
.con-content{width: 100%;}
.con-content-left{width: 18%;height: 92vh;border-right:1px solid #bababa; background-color: #F1F6FF;}
.con-content-right{width: 80%;background-color: #ffffff;height: 92vh;}
.con-content-left ul li{text-align: center;font-size:16px; height:40px;line-height: 40px;border-bottom: 1px solid #bababa;background-color: #ffffff;}
.more{width: 12px;height: 12px;}
.c-c-top{height: 40px;line-height: 40px;}
.c-c-con{width:96%;margin: 0 auto 2%;height: 80px;line-height: 80px; border: 1px solid #bababa;}
.c-c-con ul li{float: left;text-align: center;font-size: 16px;}
#select{width:200px;height: 30px;padding: 0 10px;}
.kh{width: 24%;margin-left:3%;}
.search-in{width: 15%;}
.kh input{width: 50%;height: 25px;padding: 0 8px;margin-left: 4px;}
.search-in input{width:100px;height: 30px;background-color: #3B9EF6;color: #FFFFFF;border-style: none;}
   /*表格*/
.table{border: 1px solid #373737;width: 100%;margin-top: 10px;border-collapse:collapse;font-size: 14px;padding: 0 5px;}
.table-bordered > tbody > tr > td,.table-bordered > thead > tr > th{text-align: center;border: 1px solid #bababa;height: 45px;line-height: 45px;}
        .forms{width: 96%;}
        .thr span{cursor:pointer; color: #6CAAF0;border-bottom: 1px solid #6CAAF0;height: 20px;line-height: 20px;margin-left: 10px;}
.foot-fy{position: absolute;bottom: 20px;text-align: center;width: 75%}
        .foot-fy span{margin-right: 10px;}
        /*报销详情*/
        .news1{background-color: #F6FAFF;width: 93%;height:auto;padding: 10px 20px;}
        .news1 ul span{display: inline-block;width: 38%;}
.news1 ul li{float: left;width: 38%;height: 40px;line-height: 40px;margin-left: 12%;}
 .new-ul{width: 100%;height: 120px;}
 .spn1{height: 30px;line-height: 30px;}
 .gldd{height: 80px;}
.state{width: 13%;margin-left: 12%;}
 .state-con{width: 67%;line-height: 20px;}
.state-box{height: 50px;line-height: 50px;padding: 2% 0;}
 .details{height: 78vh;overflow-y: scroll;padding-bottom: 50px;}
.sh-box{height: 50px;line-height: 50px;background-color: #FFFFFF;width: 77%;text-align: right;position: fixed;bottom: 0;}
.shb,.shg{display: inline-block;cursor: pointer; text-align: center; width:120px;height: 35px;line-height:35px;color: #FFFFFF;font-size: 16px;margin-right: 13px;}
.shg{background-color: #6CAAF0;}
 .shb{background-color: #FF3A43;}
.background{width: 100%;height: 100vh;background: rgba(0,0,0,0.3);  position: fixed;top: 0;  left:0; z-index: 1111;}
 .content1{position: absolute;overflow: hidden;top: 32%;left: 35%;width:390px;text-align: center;height: 220px;background-color: #FFFFFF;border-radius: 10px;}
.content1-sp{height:175px;line-height: 175px;font-size: 18px;}
.sub-box{width: 100%;height: 45px;line-height: 45px; border-top: 1px solid #d1d1d1;}
.sub-box span{display: inline-block;width: 50%;cursor: pointer;box-sizing: border-box;}
.exit1{border-right: 1px solid #d1d1d1;float: left;}
.sub-box span:hover{background-color: #6CAAF0;color: #FFFFFF;}

</style>
</head>
<body>
<div class="wrapper">
    <div class="sign-box hide1">
        <div class="sign-top">
            <span class="fz10">HOLO哈啰通用中台</span>
            <span class="fz4">V.1.0.0</span>
        </div>

        <div class="sign">
            <input type="text" placeholder="请输入账号">
            <input type="password" placeholder="请输入密码">
            <button class="btn">登录</button>
        </div>
    </div>
   <div class="content">
         <div class="con-top b-btm bg">
             <span class="dis_in fz10">HOLO哈啰通用中台</span>
             <span class="dis_in fr"><span class="user">1384567234</span><input class="exit" type="button" value="退出"></span>
         </div>
       <div class="con-content">
           <div class="con-content-left fl dis_in">
               <ul>
                   <li>报销管理</li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
           </div>
           <div class="con-content-right dis_in fr">
               <div class="con-bg ">
                <div class="c-c-top">报销管理 <img class="more" src="Artboard%2013@3x.png" alt=""></div>
                <div class="c-c-con fl">
                   <ul>
                       <li class="kh"><span>报销单号</span><input type="text" placeholder="请输入内容"></li>
                       <li class="kh"><span>客户名称</span><input type="text" placeholder="请输入内容"></li>
                       <li class="kh">
                           <select name="" id="select">
                               <option id="all" value="全部">全部</option>
                               <option value="未审核">未审核</option>
                               <option value="已审核">已审核</option>
                           </select>
                       </li>
                       <li class="search-in"><input type="button" value="搜索"></li>
                   </ul>
               </div>
               <div class="forms">
                   <table class="table table-bordered">
                       <thead>
                           <tr>
                               <th></th>
                               <th>报销单号</th>
                               <th>日期</th>
                               <th>报销金额</th>
                               <th>业务员</th>
                               <th>部门</th>
                               <th>状态</th>
                               <th>操作</th>
                           </tr>
                       </thead>
                       <tbody id="table2">
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>
                           <tr >
                               <td><input type="checkbox"></td>
                               <td>BX20170829</td>
                               <td>2017.08.29 10:00:00</td>
                               <td>￥9383.00</td>
                               <td>陈添豪</td>
                               <td>IT部</td>
                               <td>未审核</td>
                               <td class="thr"><span class="view-details">查看详情</span><span class="approve">审核通过</span></td>
                           </tr>


                       </tbody>
                   </table>
                   <div class="foot-fy">
                       <span>共<span id="sum"></span>条</span><span id="spanPre">上一页</span> <span id="spanFirst">第一页</span><span id="spanNext">下一页</span> <span id="spanLast">最后一页</span> 第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页
                   </div>
               </div>
           </div>
               <div class="con-xq hide1">
                   <div class="c-c-top">报销管理 <img class="more" src="Artboard%2013@3x.png" alt="">报销详情</div>
                   <div class="details">
                       <div >
                           <span class="spn1 fz6">基本信息</span>
                           <div class="news1">
                               <ul class="new-ul fz4">
                                   <li><span>报销单号:&nbsp;</span><span>BX20170829</span></li>
                                   <li><span>申请人:&nbsp;</span><span>陈添豪</span></li>
                                   <li><span>申请日期:&nbsp;</span><span>2017.08.29 10:00:00</span></li>
                                   <li><span>申请部门:&nbsp;</span><span>IT</span></li>
                                   <li><span>报销金额:&nbsp;</span><span>￥9383.00</span></li>
                                   <li><span>成本中心:&nbsp;</span><span>888-888</span></li>
                               </ul>
                           </div>
                       </div>
                       <div>
                           <span class="spn1 fz6">关联订单</span>
                           <div class="news1">
                               <ul class="gldd fz4">
                                   <li><span>报销单号:&nbsp;</span><span>BX20170829</span></li>
                                   <li><span>客户:&nbsp;</span><span>家乐福</span></li>
                                   <li><span>申请日期:&nbsp;</span><span>2017.08.29 10:00:00</span></li>
                                   <li><span>订单金额:&nbsp;</span><span>￥9383.00</span></li>
                               </ul>
                           </div>
                       </div>
                       <div>
                           <span class="spn1 fz6">关联订单</span>
                           <div class="news1 ">
                               <ul class="gldd fz4">
                                   <li><span>报销单号:&nbsp;</span><span>BX20170829</span></li>
                                   <li><span>申请日期:&nbsp;</span><span>2017.08.29 10:00:00</span></li>
                                   <li><span>金额:&nbsp;</span><span>￥9383.00</span></li>
                               </ul>
                               <div class="state-box b-btm">
                                   <span class="dis_in state fl">说明</span>
                                   <span class="dis_in state-con">七月份家乐福客户的交通费，在青浦区大概路程50公里，一共去了五次，两次打车来回，三次自驾七月份家乐福客户的交通费，在青浦区大概路程50公里，一共去了五次，两次打车来回，三次自驾</span>
                               </div>
                           </div>
                           <div class="news1 ">
                               <ul class="gldd fz4">
                                   <li><span>报销单号:&nbsp;</span><span>BX20170829</span></li>
                                   <li><span>申请日期:&nbsp;</span><span>2017.08.29 10:00:00</span></li>
                                   <li><span>金额:&nbsp;</span><span>￥9383.00</span></li>
                               </ul>
                               <div class="state-box b-btm">
                                   <span class="dis_in state fl">说明</span>
                                   <span class="dis_in state-con">七月份家乐福客户的交通费，在青浦区大概路程50公里，一共去了五次，两次打车来回，三次自驾七月份家乐福客户的交通费，在青浦区大概路程50公里，一共去了五次，两次打车来回，三次自驾</span>
                               </div>
                           </div>
                           <div class="news1 ">
                               <ul class="gldd fz4">
                                   <li><span>报销单号:&nbsp;</span><span>BX20170829</span></li>
                                   <li><span>申请日期:&nbsp;</span><span>2017.08.29 10:00:00</span></li>
                                   <li><span>金额:&nbsp;</span><span>￥9383.00</span></li>
                               </ul>
                               <div class="state-box b-btm">
                                   <span class="dis_in state fl">说明</span>
                                   <span class="dis_in state-con"></span>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="sh-box">
                       <span class="shb">审核不通过</span>
                       <span class="shg">审核通过</span>
                   </div>
               </div>
           </div>
       </div>
   </div>
<div class="background hide1">
    <div class="content1">
        <span class="content1-sp">确定审核通过</span>
        <div class="sub-box">
            <span class="exit1">取消</span>
            <span class="submit">确认</span>
        </div>
    </div>
</div>

</div>
<script src="jquery-1.8.3.min.js"></script>
<script src="background.js"></script>
<script>
$('.view-details').click(function(){
    $('.con-bg').hide();
    $('.con-xq').show();
});
$('.shg').click(function(){
    $('.background').show();
});
$('.exit1').click(function(){
    $('.background').hide();
});
$('.shb').click(function(){
    $('.background').show();
    $('.content1-sp').html('确认审核不通过');
    $('.submit').click(function(){
        $('.con-bg').show();
        $('.con-xq').hide();
        $('.background').hide();
    });
});
</script>
</body>
</html>